<template>
    <theme-box title="商户添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="入驻商户" :required="true" name="mchtName" :options="mchtNameOptions"
                             :value.sync="op"></form-select>
                <form-input title="商户名称" :required="true" name="realName" :value="op" v-show="ok"></form-input>
                <form-input title="商户别名" :required="false" name="mchtRName" v-show="ok"></form-input>
                <span class="box-body-bottom" v-show="ok">
                    <form-group title="商户描述" :required="false">
                        <textarea class="form-control " name="mchtDsc" rows="2" v-model="mchtDsc" @keyup="size"
                                  style="width: 265px;max-width: 265px"></textarea>
                        <!--<div class="divide-10"></div>-->
                        <div class="text-right" style="color: #777;text-align: center;position: absolute;left: 165px;">
                            {{hintSize}}/300
                        </div>
                    </form-group>
                    <form-group title="商户封面" :required="true" v-ref:doc-img name="file">
                        <file-upload v-ref:fileupload class="fileImg"></file-upload>
                    </form-group>
                    <form-group title="上级商户名称" v-show="this.mchtBusType != 3">
                        <select name="upperMchtId" class="form-control" :required="false" id="select"
                                v-show="this.mchtBusType != 3" style="width: 265px;max-width: 265px">
                            <option v-for="mcht in upperMchtlist" :value="mcht.mchtId">
                                {{mcht.mchtName}}
                            </option>
                        </select>
                    </form-group>
                    <form-group title="商圈商户" v-show="this.mchtBusType != 4">
                        <select name="tdArea" class="form-control" :required="false"
                                style="width: 265px;max-width: 265px">
                            <option v-for="mcht in tradeList" :value="mcht.mchtId">
                                {{mcht.mchtName}}
                            </option>
                        </select>
                    </form-group>
                    <form-input title="商户类型" :required="true" :read-only="true" name="mcht_Type"
                                :value="mchtInfo.mchtMainTypeValue" v-show="this.mchtBusType != 3"></form-input>
                    <form-input title="商户主类型" :required="true" :read-only="true" name="mchtType"
                                :value="mchtInfo.mchtTypeValue" v-show="this.mchtBusType != 3"></form-input>
                    <form-group title="商户次类型" :required="true" v-show="this.mchtBusType != 3">
                        <select name="mchtType2" class="form-control" style="width:265px;;max-width: 265px">
                            <option v-for="dict in secondList" :value="dict.dictId">
                                {{dict.dictValue}}
                            </option>
                        </select>
                    </form-group>
                    <!--<div id="typeBox">-->
                    <!--<form-checkbox title="二级分类" :required="true" name="mchtType2" :options="checkboxOptions" id="type2" v-show="this.mchtBusType != 3"></form-checkbox>-->
                    <!--</div>-->
                    <form-input title="商户级别" :required="true" v-bind:value="tel" :read-only="true" name="mchtLvl"
                                v-show="this.mchtBusType != 3"></form-input>
                    <form-select title="抓取设备标志" :required="false" name="mchtEquip" :options="equipOptions"
                                 :value="mchtInfo.mchtEquip" v-show="this.mchtBusType != 3"></form-select>
                    <form-select title="商区园区标识" :required="true" name="streamDbt" :options="streamDbtOptions"
                                 v-show="this.mchtBusType != 3"></form-select>
                    <form-input title="人均消费" :required="true" name="mchtPer"
                                v-show="this.mchtBusType != 3"></form-input>
                    <form-checkbox title="商户设施" :required="true" name="mchtFacil" :options="facilitiesOptions"
                                   v-show="this.mchtBusType != 3"></form-checkbox>
                    <form-checkbox title="营业日" :required="true" name="mchtBusDay" :options="dayOptions"></form-checkbox>
                    <form-date-time title="营业开始时间段" :required="true" :read-only="true" name="mchtBusTime"
                                    v-show="this.mchtBusType != 3"></form-date-time>
                    <form-date-time title="营业结束时间段" :required="true" :read-only="true" name="mchtBusEndTime"
                                    v-show="this.mchtBusType != 3"></form-date-time>
                    <!--<form-select title="营业开始时间段" :required="true" name="mchtBusTime" :options='useStartTime' v-show="this.mchtBusType != 3"></form-select>-->
                    <!--<form-select title="营业结束时间段"  :required="true" name="mchtBusEndTime"  :options='useStartTime' v-show="this.mchtBusType != 3"></form-select>-->
                    <form-input title="固定电话1" :required="true" :value="mchtInfo.mchtTel" name="mchtTel1">
                        <span class="right"><a href="javascript:;">更多...</a></span>
                    </form-input>

                    <form-checkbox title="营业日2" :required="false" name="mchtBusDay2" :options="anotherOptions"
                                   v-show="false" class="mchtBusDay2"></form-checkbox>
                    <form-date-time title="营业开始时间段2" :required="false" :read-only="true" name="mchtBusTime2" class="mchtBusTime2"
                                    v-show="this.mchtBusType != 3 && this.mchtBusType === ''"></form-date-time>
                    <form-date-time title="营业结束时间段2" :required="false" :read-only="true" name="mchtBusEndTime2" class="mchtBusEndTime2"
                                    v-show="this.mchtBusType != 3 && this.mchtBusType === ''"></form-date-time>
                    <!--<form-select title="营业开始时间段2" :required="false" name="mchtBusTime2"  class="mchtBusTime2" :options="useStartTime"  value=" " v-show="this.mchtBusType != 3"></form-select>-->
                    <!--<form-select title="营业结束时间段2" :required="false" name="mchtBusEndTime2" class="mchtBusEndTime2" :options="useStartTime" value=" " v-show="this.mchtBusType != 3"></form-select>-->
                    <form-input title="固定电话2" :required="false" name="mchtTel2" v-show="false" class="mchtTel2"></form-input>
                    <form-input title="固定电话3" :required="false" name="mchtTel3" v-show="false"
                                class="mchtTel3"></form-input>
                    <form-input title="商户电话其他" :required="false" name="mchtTel4" v-show="false"
                                class="mchtTel4"></form-input>
                    <!--<form-input title="商户详细地址" :required="true" name="mchtAddr" :value="mchtInfo.mchtAddr" id="keyword"></form-input>-->
                    <form-input title="入驻时间" :required="true" :read-only="true" name="enterTime"
                                :value="format(mchtInfo)"></form-input>
                    <form-group title="商户详细地址" :required="true">
                        <textarea class="form-control " name="mchtAddr" rows="2" :value="mchtInfo.mchtAddr"
                                  @keyup="size" id="keyword" style="width: 498px;height:100px;"></textarea>
                        <!--<div class="divide-10"></div>-->
                    </form-group>
                    <div id="message"></div>
                    <div id="tip"></div>
                    <!--地图容器-->
                    <div id="container" class="myMap"></div>
                    <!--<form-input title="靠近" :required="false" name="mchtProxi" id="message"></form-input>-->
                    <form-input title="经度" :required="false" name="mchtLocx" v-show="false"></form-input>
                    <form-input title="纬度" :required="false" name="mchtLocy" v-show="false"></form-input>

                </span>
            </div>
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
        </form>
    </theme-box>
</template>

<style media="screen" scoped>
    .form-inline .form-group {
        display: inline-block;
    }

    .right {
        position: absolute;
        left: 38%;
    }

    a {
        text-decoration: none;
    }

    .mchtBusTime2 {
        display: none;
    }

    .mchtBusEndTime2 {
        display: none;
    }

    .myMap {
        width: 500px;
        height: 500px;
        margin: auto;
    }
</style>

<script>
    import 'plugins/jquery-validation';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'

    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"

    var lng, lat
    export default {
        created () {
        },
        data: () => ({
            lng: "",
            lat: "",
            mchtMainType: "",
            mchtBusType: "",
            mchtType: "",
            mchtTime: "",
            mchtDsc: "",
            mchtName: "",
            op: "0",
            ok: false,
            mshow: false,
            upperMchtlist: [],
            dictList: [],
            secondList: [],
            tradeList: [],
            address: "",
            hintSize: "0",
            mchtNameOptions: [],
            checkboxOptions: [],
            mchtInfo: {},
            equipOptions: [
                {key: "有", value: "0"},
                {key: "没有", value: "1"},
            ],
            streamDbtOptions: [
                {key: "商区", value: "business"},
                {key: "园区", value: "park"},
            ],
            facilitiesOptions: [
                {key: "WIFI", value: "1"},
                {key: "可停车", value: "2"},
                {key: "刷卡", value: "3"},
                {key: "卡座", value: "4"},
                {key: "包间", value: "5"},
                {key: "宝宝椅", value: "6"},
                {key: "无烟区", value: "7"},
                {key: "吸烟区", value: "8"},
                {key: "沙发位", value: "9"},
                {key: "露天位", value: "10"},
                {key: "表演", value: "11"},
                {key: "景观位", value: "12"},
            ],
            dayOptions: [
                {
                    key: "星期一",
                    value: "1"
                }, {
                    key: "星期二",
                    value: "2"
                }, {
                    key: "星期三",
                    value: "3"
                }, {
                    key: "星期四",
                    value: "4"
                }, {
                    key: "星期五",
                    value: "5"
                }, {
                    key: "星期六",
                    value: "6"
                }, {
                    key: "星期天",
                    value: "7"
                }
            ],
            anotherOptions: [{
                key: "星期一",
                value: "1"
            }, {
                key: "星期二",
                value: "2"
            }, {
                key: "星期三",
                value: "3"
            }, {
                key: "星期四",
                value: "4"
            }, {
                key: "星期五",
                value: "5"
            }, {
                key: "星期六",
                value: "6"
            }, {
                key: "星期天",
                value: "7"
            }],
            useStartTime: [{
                key: "00:00",
                value: "00:00"
            }, {
                key: "01:00",
                value: "01:00"
            }, {
                key: "02:00",
                value: "02:00"
            }, {
                key: "03:00",
                value: "03:00"
            }, {
                key: "04:00",
                value: "04:00"
            }, {
                key: "05:00",
                value: "05:00"
            }, {
                key: "06:00",
                value: "06:00"
            }, {
                key: "07:00",
                value: "07:00"
            }, {
                key: "08:00",
                value: "08:00"
            }, {
                key: "09:00",
                value: "09:00"
            }, {
                key: "10:00",
                value: "10:00"
            }, {
                key: "11:00",
                value: "11:00"
            }, {
                key: "12:00",
                value: "12:00"
            }, {
                key: "13:00",
                value: "13:00"
            }, {
                key: "14:00",
                value: "14:00"
            }, {
                key: "15:00",
                value: "15:00"
            }, {
                key: "16:00",
                value: "16:00"
            }, {
                key: "17:00",
                value: "17:00"
            }, {
                key: "18:00",
                value: "18:00"
            }, {
                key: "19:00",
                value: "19:00"
            }, {
                key: "20:00",
                value: "20:00"
            }, {
                key: "21:00",
                value: "21:00"
            }, {
                key: "22:00",
                value: "22:00"
            }, {
                key: "23:00",
                value: "23:00"
            }]
        }),
        computed: {
            hintSize: function () {
                return this.address.length
            },
            tel: function () {
                return this.mchtInfo.mchtLvl + '';
            },
        },
        watch: {
            async op (value) {
                var rep = await this.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/get/" + value,
                    method: "GET",
                })
                this.mchtInfo = rep.content;
                this.mchtTime = this.mchtInfo.enterTime
                this.mchtType = this.mchtInfo.mchtType
                this.mchtBusType = this.mchtInfo.mchtBusType
                this.mchtMainType = this.mchtInfo.mchtMainType
                this.mchtName = this.mchtInfo.mchtName.toString()
                //判断有无分店显示上级商户编号
                if (this.mchtBusType == "1") {
                    this.getMcht();
                    $("input[name='realName']").removeAttr("readOnly");
                } else {
                    this.upperMchtlist = [];
                    $("input[name='realName']").attr("readOnly", true);
                }
                if (this.mchtType != '') {
                    this.secondFn();
                }
                value == "" ? this.ok = false : this.ok = true
            },


        },
        methods: {
            format (value) {
                let s = value.enterTime + ""
                return dateFormat(s)
            },
            reset () {
                $("label.error").remove();
                this.$els.form.reset();
            },
            getMcht () {
                let self = this;
                var _data = {mchtName: this.mchtName};
                self.$post({
                    url: '/api/v2' + projectName_Url + '/list/mcht/upper',
                    data: _data,
                    method: "post"
                }).then(response => {
                    let list = response.content.upperMchtlist;
                    self.$set("upperMchtlist", list)
                    if (list == "") {
                        $("input[name='realName']").attr("readOnly", true);
                    }
                }, error => {
                });
            },
            dictFn (data) {
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/list/caterdict/back_type/0",
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("dictList", list)
                }, error => {
                });
            },
            secondFn (data) {
                let self = this;
                self.$post({
                    url: "/api/v1" + projectName_Url + "/list/caterdict/" + this.mchtMainType + '/1',
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    // var _array = [];
                    // for (let i = 0; i < list.length; i++) {
                    //     _array.push({value: list[i].value, key: list[i].key});
                    // }
                    // self.checkboxOptions = _array;
                    self.$set("secondList", list)
                }, error => {
                });
            },
            tradeFn (data) {
                let self = this;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/getTdarealist",
                    method: "POST"
                }).then(response => {
                    let list = response.content.info;
                    list.unshift({mchtName: "无", mchtId: ""});
                    self.$set("tradeList", list)
                }, error => {
                });
            },
            submit (data) {

            },
            size (e) {
                let str = e.target.value;
                let size = str.length;
                let result = '';
                if (size >= 50) {
                    result = str.substring(0, 50);
                } else {
                    result = str
                }
                this.$set("address", result)
            },
            init: function () {
                var map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 11,
                    center: [121.48, 31.22]
                });

                AMap.plugin('AMap.ToolBar', function () {
                    var toolbar = new AMap.ToolBar();
                    map.addControl(toolbar)
                });
                AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
                    var autoOptions = {
                        city: "", //城市，默认全国
                        input: "keyword"//输入的input的id
                    };
                    var autocomplete = new AMap.Autocomplete(autoOptions);
                    var placeSearch = new AMap.PlaceSearch({
                        city: '',
                        map: map
                    });
                    AMap.event.addListener(autocomplete, "select", function (e) {
                        placeSearch.search(e.poi.name)
                    });
                });
                AMap.service('AMap.Geocoder', function () {
                    var geocoder = new AMap.Geocoder({
                        city: ""//城市，默认：“全国”
                    });
                    var marker = new AMap.Marker({
                        map: map,
                        bubble: true
                    });
                    map.on('click', function (e) {
                        marker.setPosition(e.lnglat);
                        geocoder.getAddress(e.lnglat, function (status, result) {
                            if (status == 'complete') {
                                document.getElementById('keyword').value = result.regeocode.formattedAddress;
                                var result = result.regeocode.formattedAddress;
                                geocoder.getLocation(result, function (status, result) {
                                    if (status == 'complete' && result.info === 'OK') {
                                        marker.setPosition(result.geocodes[0].location);
                                        map.setCenter(marker.getPosition())
                                        lng = result.geocodes[0].location.lng;
                                        lat = result.geocodes[0].location.lat;
//                                   document.getElementById('message').innerHTML = '定位到啦'
                                    } else {
//                                   document.getElementById('message').innerHTML = '获取位置失败'
                                    }
                                })
                            }
                        })
                    });
                });
            }
        },
        ready: function () {
            dateTime({
                format: "hh:ii",
                startDate: '',
                endDate: '',
                minView: 0,
                maxView: 2,
                minuteStep: 1,
                startView: 0 //显示视图从时分开始
            });
            //隐藏日期title
            $('.datetimepicker .datetimepicker-minutes .table-condensed thead tr th:nth-child(2)').css('visibility', 'hidden')
            var self = this;
            var roleId = JSON.parse(localStorage.getItem("id_token")).roleId
            var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
            var _data = {roleId: roleId, mchtId: mchtId}
            this.$post({
                url: '/api/v2' + projectName_Url + '/plat/mcht/queryall',
                data: _data,
                method: "POST"
            }).then(data => {
                this.mchtNameOptions = data.content.info
                // this.op = data.content.info[0].value || ""
            })
            // self.dictFn();
            self.init();
            self.secondFn();
            self.tradeFn();
            //二级分类最多选三个
            // $("#type2").click(function(){
            // if($("input[name = 'mchtType2']:checked").length > 3){
            //         Midway.alert({title:"操作提示",content:"二级分类最多选择三个"})
            //         event.srcElement.checked=false;
            // }
            // })
            //选了营业日2 则要选时间段2
            $(".mchtBusDay2").click(function () {
                if ($("input[name = 'mchtBusDay2']:checked").length >= 1) {
                    $(self.$els.form.mchtBusTime2).rules("add", {
                        required: true,
                    });
                    $(self.$els.form.mchtBusEndTime2).rules("add", {
                        required: true,
                    });
                } else {
                    $(self.$els.form.mchtBusTime2).rules("remove", "required");
                    $(self.$els.form.mchtBusEndTime2).rules("remove", "required");
                }
            })

            //点击重置
            $("button[type=reset]").click(function () {
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mcht/get/" + self.$els.form.mchtName.value,
                    method: "GET",
                }).then(data => {
                    return data
                }).then(response => {
                    self.mchtInfo = response.content;
                    self.mchtBusType = self.mchtInfo.mchtBusType
                    self.$els.form.realName.value = self.$els.form.mchtName.value;
                    self.$els.form.mchtType.value = self.mchtInfo.mchtTypeValue;
                    self.$els.form.mchtLvl.value = self.mchtInfo.mchtLvl;
                    self.$els.form.mchtTel1.value = self.mchtInfo.mchtTel;
                    self.$els.form.mchtAddr.value = self.mchtInfo.mchtAddr;
                    self.$els.form.enterTime.value = dateFormat(self.mchtInfo.enterTime);


                    var _data = {mchtName: self.$els.form.mchtName.value};
                    self.$post({
                        url: '/api/v2' + projectName_Url + '/list/mcht/upper',
                        data: _data,
                        method: "post"
                    }).then(response => {
                        let list = response.content.upperMchtlist;
                        var map = [];
                        for (var i = 0; i < list.length; i++) {
                            map.push({key: list[i].mchtName, value: list[i].mchtId})
                        }

                        self.$set("upperMchtlist", map)
                        if (list == "") {
                            $("#realName").attr("readOnly", true);
                        }
                    }, error => {
                    });
                }, error => {
                });
            })
            $(self.$els.form).validate({
                // debug: true,
                submitHandler: function (form) {
                    //对二级分类进行数据处理
                    // var mchtType2 = [];
                    // for (var key in _data.mchtType2) {
                    //     if (_data.mchtType2[key]) {
                    //         mchtType2.push(_data.mchtType2[key]);
                    //     }
                    // }
                    // delete _data.mchtType2;
                    // _data.mchtType2 = mchtType2.join(",");
                    //对设施多选框进行数据处理
                    var _str = '';
                    $("input[name=mchtFacil]").each(function () {
                        _str += $(this).prop("checked") ? '1' : '0';
                    });
                    //对营业日进行数据处理
                    var _dayStr = '';
                    $("input[name=mchtBusDay]").each(function () {
                        if ($(this).is(":checked")) {
                            _dayStr += $(this).val();
                        }
                    });
                    _dayStr = _dayStr.split('').join(",");

                    //对营业日2进行数据处理
                    var _dayStr2 = '';
                    $("input[name=mchtBusDay2]").each(function () {
                        if ($(this).is(":checked")) {
                            _dayStr2 += $(this).val();
                        }
                    });
                    _dayStr2 = _dayStr2.split('').join(",");

                    var mchtBusTime = self.$els.form.mchtBusTime.value + '-' + self.$els.form.mchtBusEndTime.value;
                    if (self.$els.form.mchtBusTime2.value != "" && self.$els.form.mchtBusEndTime2.value != "") {
                        var mchtBusTime2 = self.$els.form.mchtBusTime2.value + '-' + self.$els.form.mchtBusEndTime2.value;
                    } else {
                        var mchtBusTime2 = "";
                    }
                    var realName = $("#realName").val();
                    let formData = new FormData(form);
                    if (self.tradeList == '') {
                        formData.set("tdArea", '')
                    }
                    formData.set("mchtName", realName)
                    formData.set("mchtFacil", _str)
                    formData.set("mchtBusDay", _dayStr)
                    formData.set("mchtBusDay2", _dayStr2)
                    formData.set("enterTime", self.mchtTime)
                    formData.set("mchtBusTime", mchtBusTime)
                    formData.set("mchtBusTime2", mchtBusTime2)
                    formData.set("mchtType", self.mchtType)
                    formData.set("mchtBusType", self.mchtBusType)
                    formData.set("mchtLocx", lng)
                    formData.set("mchtLocy", lat)
                    loading(true)
                    // 添加：二级分类 2   人均0 商户设施000000000000  营业日默认 00:00-23:00
                    if (self.mchtBusType == '3') {
                        formData.set("mchtType", '1');
                        formData.set("mchtLvl", '0');
                        formData.set("mchtEquip", '1');
                        formData.set("streamDbt", 'business');
                        formData.set("mchtType2", '2');
                        formData.set("mchtPer", '0');
                        formData.set("mchtFacil", '000000000000');
                        formData.set("mchtBusTime", '00:00-23:00')
                    }
                    self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/mcht/add",
                        data: formData
                    }).then(response => {
                        if (self.mchtBusType == '3') {
                            let data = {
                                title: "操作成功",
                                content: "是否添加店员店长"
                            }
                            self.upperMchtlist = "";
                            self.reset();
                            Midway.confirm(data).then(function () {
                                self.$route.router.go('/mchtUsr/create');
                            })
                        } else {
                            let data = {
                                title: "操作成功",
                                content: "是否进入商户列表查看?"
                            }
                            self.upperMchtlist = "";
                            self.reset();
                            Midway.confirm(data).then(function () {
                                self.$route.router.go('/merchant/list');
                            })
                        }
                    }).then(() => loading(false)).catch(() => loading(false))
                },
                errorPlacement: function (error, element) {
                    if (element.parents('div.checkbox-item').length != 0) {
                        element.parents("div.checkbox-item").find("div.checkbox-error").append(error)
                    } else if (element.parents('div.file-item').length != 0) {
                        error.insertAfter(element.parents("div.file-item"));
                    } else {
                        error.insertAfter(element)
                    }
                },

                rules: {
                    mchtName: {
                        required: true,
                        maxlength: 16
                    },
                    realName: {
                        required: true,
                        maxlength: 16
                    },
                    mchtRName: {
                        stringMaxLength: 64
                    },
                    mchtLvl: {
                        required: true,
                        maxlength: 2
                    },
                    file: {
                        required: true
                    },
                    mchtType2: {
                        required: true
                    },
                    mchtDsc: {
                        // maxlength: 50
                        maxlength: 300
                    },
                    mchtFacil: {
                        required: true
                    },
                    mchtPer: {
                        required: true,
                        int: true,
                        number: true,
                        min: 1,
                        maxlength: 3
                    },
                    mchtAddr: {
                        required: true,
                        maxlength: 50
                    },
                    mchtTel1: {
                        required: true,
                        isPhone: true
                    },
                    mchtTel2: {
                        isPhone: true
                    },
                    mchtTel3: {
                        isPhone: true
                    },
                    mchtTel4: {
                        isPhone: true
                    },
                    mchtBusDay: {
                        required: true,
                    },
                    mchtBusTime: {
                        required: true
                    }, mchtBusEndTime: {
                        required: true
                    }
                }
            });
            //点击更多显示隐藏
            $(".right").click(function () {
                $(".mchtBusDay2").toggle();
                $(".mchtBusTime2").toggle();
                $(".mchtBusEndTime2").toggle();
                $(".mchtTel2").toggle();
                $(".mchtTel3").toggle();
                $(".mchtTel4").toggle();
                self.mshow = !self.mshow;
            });
        }
    }
</script>
